<template>
	<view class="zjy-labels" :class="customClass">
		<template v-for="(label, index) in data.filter((item) => !!item)" :key="index">
			<view
				:class="['label-item', { highlight, important }]"
				v-if="!maxCount ? true : index < maxCount"
				:style="{
					border: `1rpx solid ${label?.[keyBgColor] ? label?.[keyBgColor] : '#e5e6e8'}`,
					color: label?.[keyBgColor] ? label?.[keyBgColor] : '#86909c',
				}"
			>
				<text v-if="keyName">
					{{ label[keyName] }}
				</text>
				<text v-else>{{ label }}</text>
			</view>
		</template>
	</view>
</template>

<script setup lang="ts">
const props = defineProps({
	data: {
		type: Array as PropType<any[]>,
		default: [],
	},
	keyName: String,
	keyBgColor: {
		type: String,
		default: "",
	},
	highlight: Boolean,
	important: Boolean,
	maxCount: Number,
	customClass: String,
})
</script>

<style scoped lang="scss">
.zjy-labels {
	display: flex;
	flex-wrap: wrap;

	.label-item {
		height: 36rpx;
		border-radius: 8rpx;
		border: 1rpx solid #e5e6e8;
		padding: 4rpx 8rpx;
		font-size: 20rpx;
		color: $c-grey-86;
		margin-right: 12rpx;
		margin-bottom: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;

		&:last-child {
			margin-right: 0;
		}

		&.highlight {
			color: $c-theme; /* Adjust this variable as needed */
			border-color: rgba(237, 150, 0, 0.4);
		}

		&.important {
			color: $red; /* Adjust this variable as needed */
			border-color: rgba(254, 79, 47, 0.3);
		}
	}
}

.no-wrap {
	flex-wrap: no-wrap;
	overflow: hidden;
	height: 42rpx;
}
</style>
